<template>
	<z-paging :paging-style="{ background: '#f6f6f6' }" ref="paging" :refresher-out-rate="0.8"
		:show-empty-view-reload-when-error="false" :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无商品" bg-color="#FFF" v-model="dataList" @query="queryList" safe-area-inset-bottom>
		<view slot="top" class="topTabbar">
			<u-tabs :current="currentTab" :list="tabList" @change="tabChange" :scrollable="false"></u-tabs>
		</view>
		
		<!-- 左边儿的 -->
		<u-radio-group v-model="leftValue" placement="column" @change="leftGroupChange">
			<view class="flex_wrap row_middle radioContent" v-for="(item, index) in dataList">
				<u-radio :customStyle="{ marginRight: '8px' }" shape="circle" :key="index" :name="item.id" size="50rpx"
					iconSize="30rpx" />
				<!-- 咨询list -->
				<view v-if="currentTab === 0" class="flex_wrap row_between" style="width: 580rpx">
					<u-image :src="item.videoCover" mode="aspectFill" width="200rpx" height="200rpx" />
					<view class="flex_wrap flex_column row_between row_top" style="width: 350rpx">
						<text class="goodsName breakText">{{
				            item.videoIntro
				        }}</text>
						<view class="flex_wrap">
							<u-text :text="$u.timeFormat(item.serviceTime, 'yyyy年mm月dd日')" size="24rpx" color="#666" />
						</view>
					</view>
				</view>
				<!-- 视频list -->
				<view v-if="currentTab === 1" class="flex_wrap row_between" style="width: 580rpx">
					<u-image :src="item.videoCover" mode="aspectFill" width="200rpx" height="200rpx" />
					<view class="flex_wrap flex_column row_between row_top" style="width: 350rpx">
						<text class="goodsName breakText">{{
				            item.videoName
				        }}</text>
						<view class="flex_wrap">
							<u-text :text="$u.timeFormat(item.serviceTime, 'yyyy年mm月dd日')" size="24rpx" color="#666" />
						</view>
					</view>
				</view>
				<!-- 商品list -->
				<view v-if="currentTab === 2" class="flex_wrap row_between" style="width: 580rpx">
					<u-image :src="item.thumbnail" mode="aspectFill" width="200rpx" height="200rpx" />
					<view class="flex_wrap flex_column row_between row_top" style="width: 350rpx">
						<text class="goodsName breakText">{{
                            item.goodsName
                        }}</text>
						<view class="flex_wrap">
							<u-text size="28rpx" mode="price" color="#FF0000" :text="goodsSkuListPrice(item)" />
							<text style="
                                    color: #ff0000;
                                    margin-left: 10rpx;
                                    font-size: 28rpx;
                                ">起</text>
						</view>
					</view>
				</view>
			</view>
		</u-radio-group>
		<!-- 名片 -->
		<view class="cardBg" v-if="currentTab === 3">
			<view class="flex_wrap row_center">
				<u-text text="已生成您得公众号二维码" margin="120rpx 0 40rpx" size="48rpx" color="#040404" align="center"/>
			</view>
			<view class="flex_wrap row_center">
				<u--image :src="cardQrCodeUrl" width="200px" height="200px"></u--image>
			</view>
			<view class="flex_wrap row_center">
				<u-text text="长按分享二维码" size="30rpx" margin="40rpx 0 100rpx" color="#040404" align="center"/>
			</view>
			<view class="flex_wrap row_right">
				<u-icon
				   @click="to_userInfo()"
				    name="arrow-right"
				    size="28rpx"
				    label="生成海报"
				    labelSize="28rpx"
				    labelColor="#666"
					label-pos="left"
					:customStyle="cardIconStyle"
				/>
			</view>
		</view>
		<view slot="bottom">
			<view class="bottom"  v-if="currentTab !== 3"><u-button text="生成二维码" :customStyle="buttonCustomStyle" shape="circle"
					@click="QRcodeFun" /></view>
		</view>
		<u-popup :show="showQR" :round="10" mode="center" @close="showQR = false" @touchmove.stop.prevent="() => {}">
			<view class="QRWrap">
				<u--image :src="showImgData" width="200px" height="200px"></u--image>
			</view>
		</u-popup>
	</z-paging>
</template>

<script>
	import {
		getGoodsIdListBySalesmanId,
		updateGoodsIdList,
		getGoodsListApi,
		delistGoodsIdList,
	} from "@/api/shopSalesman.js";
	import {
		getBlogList,
		getPageVideo
	} from "@/api/consultationSalesman.js";
	import {
		genWxMpQrCode
	} from "@/api/orderSalesman.js";
	import caches from "@/config/caches.js";
	import {
		formatDecimal
	} from "@/utils/index.js";
	import {
		numDiv
	} from "@/js_sdk/nl-precisionNum/precisionNum.js";
	import {
		mapGetters
	} from "vuex";

	export default {
		computed: {
			goodsSkuListPrice() {
				return (item) => {
					const money =
						item.minPrice || numDiv(item.price * item.discount, 100);
					return formatDecimal(numDiv(money, 100));
				};
			},
			...mapGetters(["userInfo"]),
		},
		data() {
			return {
				id: '',
				scene: '0',
				cardQrCodeUrl: '',
				showImgData: '',
				showQR: false,
				buttonCustomStyle: {
					height: "74rpx",
					width: "694rpx",
					backgroundColor: "#588BF3",
					fontSize: "#FFF",
					margin: "0 auto",
					color: "#FFF",
				},
				selectedAllValue: false,
				leftList: [{
					name: "1231312",
				}, ],
				tabList: [
					{
						name: "资讯",
						id: 0,
					},
					{
						name: "视频",
						id: 1,
					},
					{
						name: "商品",
						id: 2,
					},
					{
						name: "我的",
						id: 3,
					},
				],
				currentTab: 0,
				dataList: [],
				leftValue: [],
				rightValue: [],
				cardIconStyle: {
				    marginRight: "40rpx",
				},
			};
		},
		methods: {
			QRcodeFun() {
				if (!this.leftValue.length) return uni.$u.toast("请选择要分享内容！");
				this.showQR = true;
				const params = {
					scene: this.scene,
					sceneId: this.leftValue
				};
				genWxMpQrCode(params).then((res) => {
					if (res.code === 200 && res.data) {
						this.showImgData = res.data.qrCodeUrl;
					}
				});
			},
			async queryList(pageNo, pageSize) {
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					recordType: 1,
				};
				let result;
				switch (this.currentTab) {
					case 0:
						result = await getPageVideo(params);
						break;
					case 1:
						const paramsVideo = {
							pageNum: pageNo,
							pageSize: pageSize,
							recordType: 0,
						};
						result = await getPageVideo(paramsVideo);
						break;
					case 2:
						this.goodsData = {
							pageNum: pageNo,
							pageSize: pageSize,
							goodsFlag: 0,
							goodssource: 0,
							queryType: 1,
							tenantId: uni.getStorageSync(caches.TENDID) ||
								uni.getStorageSync(caches.USER_INFO)["tenantId"],
						};
						result = await getGoodsListApi(this.goodsData);
						break;
					case 3:
						result = await genWxMpQrCode({scene: 3});
						this.cardQrCodeUrl = result.data.qrCodeUrl;
						break;
					default:
						result = await getBlogList(params);
						this.cardQrCodeUrl = result.data.qrCodeUrl;
				}
				if ([0 ,1, 2].includes((this.currentTab))) {
					this.$refs.paging.completeByTotal(
						result.data.rows,
						result.data.total
					);
				}
			},
			async tabChange(e) {
				this.currentTab = e.index;
				this.scene = e.id
				this.leftValue = [];
				await this.$refs.paging.reload();
			},
			leftGroupChange(e) {
				this.selectedAllValue = e.length === this.dataList.length;
			},
			to_userInfo(){
				uni.navigateTo({
				    url: "/pages_my/myShare/userInfo",
				});
			}
		},
	};
</script>

<style>
	page {
		background-color: #f6f6f6 !important;
	}
</style>

<style scoped lang="scss">
	.topTabbar {
		background-color: #fff;
		padding-bottom: 16rpx;
	}

	.radioContent {
		width: 670rpx;
		height: 256rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin: 0 auto;
		padding-left: 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}

	.goodsName {
		width: 100%;
		font-size: 28rpx;
		color: #3d3d3d;
		font-weight: bold;
	}

	.bottomfixed {
		width: 100vw;
		height: auto;
		padding: 28rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bottom {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
	}
	
	.cardBg{
		// width: 100%;
		// height: 100vh;
		// background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/19/d65908dcf45b4526bc2ddb988fedbd9e.jpg");
		// background-repeat: no-repeat;
		// background-size: contain;
		// padding: 400rpx 0;
		// display: flex;
		// justify-content: center;
		margin: 0 auto;
		text-align: center;
	}
</style>
